import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_ui/src/components/FormCreator.dart';
import 'package:flutter_ui/src/components/FormValidate.dart';
import 'package:flutter_ui/src/components/Header.dart';
import 'package:flutter_ui/src/components/formControls/controls.dart';

class FormPage extends StatefulWidget {
  FormPage({Key key}) : super(key: key);

  _FormPageState createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
  Map<String, dynamic> formData;
  Map<String, FormControlBuilder> controls = <String, FormControlBuilder>{
    "text": (FormControlContext context) => FormTextControl(controlContext: context),
    "code":  (FormControlContext context) => FormCountDown(controlContext: context),
    "password": (FormControlContext context) {
      context.defaultProps["obscureText"] = true;
      return FormTextControl(controlContext: context);
    },
    "date": (FormControlContext context) => FormDatePicker(controlContext: context),
    "submit": (FormControlContext context)=> FormSubmitButton(controlContext: context),
    "image": (FormControlContext context) => FormImagePicker(controlContext: context)
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: Header(title: "表单"),
       body: FormCreator(
         controls: controls, 
         fields: <FormCreatorField>[
           FormCreatorField(field: "phone", autoValidate: true, props: <String,dynamic>{
             "placeholder": "请输入手机号码"
           }),
           FormCreatorField(type: 'code', field: "code", autoValidate: true, props: <String,dynamic>{
             "placeholder": "请输入验证码"
           }),
           FormCreatorField(type: 'password', field: "password", autoValidate: true, props: <String,dynamic>{
             "placeholder": "请输入密码"
           }),
           FormCreatorField( type: 'date', field: 'birthday', autoValidate: true, props: <String,dynamic>{
            "placeholder": "请选择"
           }),
           FormCreatorField( type: 'image', field: 'avatar', autoValidate: true, props: <String,dynamic>{
            "placeholder": "请选择",
            "crop": true,
           }),
           FormCreatorField(type: "submit", props: <String,dynamic>{
             "title": "提交"
           }, field: "submit"),
         ],
         rules: <ValidateRule>[
           ValidateRule(field: "phone", required: true, msg: "请填写手机号码"),
           ValidateRule(field: "phone", max: 11, regex: RegExp(r"^1[3-9]\d{9}$"), msg: "请填写正确的手机号码"),
           ValidateRule(field: "code", required: true, msg: "请填写验证码"),
           ValidateRule(field: "code", max: 8, regex: RegExp(r"^[0-9a-zA-Z]{4,8}$"), msg: "请填写正确4-8位的验证码"),
           ValidateRule(field: "password", required: true, msg: "请填写密码"),
           ValidateRule(field: "password", max: 20, regex: RegExp(r"^[0-9a-zA-Z]{6,20}$"), msg: "请填写正确6-20位的密码"),
         ],
         onSubmit: (FormCreatorContext formContext){
           // 提交表单
           print(formContext.formData);
           print("提交表单");
         },
       ),
    );
  }
}